<template>
<!--guide.wxml-->
<view class="guide-page">
    <navigator class="go-index" url="/pages/index/index/index">
        <image class="wh100" src="https://apispec.tp-shop.cn/public/static/images/guide/pic-guide-4.png"></image>
    </navigator>
    <navigator class="product" url="/pages/index/index/index">
        <image class="wh100" src="https://apispec.tp-shop.cn/public/static/images/guide/pic-guide-5.png"></image>
    </navigator>
    <navigator class="certificate" :animation="animationData1" url="/pages/guide/article/article?id=100">
        <image class="wh100" src="https://apispec.tp-shop.cn/public/static/images/guide/pic-guide-1.png"></image>
        <view class="line"></view>
    </navigator>
    <navigator class="introduce" :animation="animationData3" url="/pages/guide/article/article?id=101">
        <image class="wh100" src="https://apispec.tp-shop.cn/public/static/images/guide/pic-guide-3.png"></image>
        <view class="line"></view>
    </navigator>
    <navigator class="join" :animation="animationData2" url="/pages/guide/supplier/supplier">
        <image class="wh100" src="https://apispec.tp-shop.cn/public/static/images/guide/pic-guide-2.png"></image>
        <view class="line"></view>
    </navigator>
</view>
</template>

<script>

export default {
  data() {
    return {
      animationData1: {},
      animationData2: {},
      animationData3: {}
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {//   var animation = wx.createAnimation({
    //       duration: 1000,
    //       timingFunction: 'ease-in-out',
    //   });
    //   this.animation = animation;
    //   this.animation.top('36.28186%').step();
    //   this.setData({
    //       animationData1: this.animation.export()
    //   })
    //   this.animation.top('33.80801%').step();
    //   this.setData({
    //       animationData2: this.animation.export()
    //   })
    //   this.animation.top('10.71964%').step();
    //   this.setData({
    //       animationData3: this.animation.export()
    //   })
  },
  methods: {}
};
</script>
<style>
/* guide.wxss */
page{height: 100%;}
.guide-page{
    position: relative;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(#27d9f3,#22b1ec);
}
.go-index{
    position: absolute;
    width:42.666667%;
    height: 10.4948%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6.74663%;
}
.product{
    position: absolute;
    z-index: 2;
    width:29.33333%;
    height:52.47376%;
    left: 50%;
    transform: translateX(-50%);
    bottom:19.04048%;
}
@keyframes run1{
    0% {
        top:32%;
    }
    50% {
        top:36.28186%;
    }
    100% {
        top:32%;
    }
}
.certificate{
    position: absolute;
    width:40%;
    height:19.49026%;
    left:0;
    /* top:36.28186%; */
    /* top:-58%; */
    top: 32%;
    animation: run1 2s ease-in-out infinite;
}
@keyframes run2{
    0% {
        top:7%;
    }
    50% {
        top:10.71964%;
    }
    100% {
        top:7%;
    }
}
.introduce{
    position: absolute;
    width:50.66667%;
    height:24.73763%;
    left:27.2%;
    /* top:10.71964%; */
    /* top:-36%; */
    top:7%;
    animation: run2 1.8s ease-in-out infinite;
}
@keyframes run3{
    0% {
        top:30%;
    }
    50% {
        top:33.80801%;
    }
    100% {
        top:30%;
    }
}
.join{
    position: absolute;
    width:37.33333%;
    height:18.74063%;
    right:0;
    /* top:33.80801%; */
    /* top:-53%; */
    top:30%;
    animation: run3 2.2s ease-in-out infinite;
}

image{
    position:relative;
    z-index: 1;
}
.line{
    position: absolute;
    height:300%;
    width:4rpx;
    background: linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,1));
    left:50%;
    top:-250%;
}

</style>